<!-- 
 * @Author: guanpf 992093924@qq.om
 * @Date: 2023-07-15 23:58:16
 * @LastEditTime: 2023-11-01 13:08:14
 * @LastEditors: guanpf
 * @Description: 
 * @FilePath: /ZCGL_WX/src/views/main/asset/views/log.vue
 -->
<template>
  <div>
    <tab :line-width="2" active-color="rgb(80, 119, 185)" custom-bar-width="60px">
      <tab-item selected @on-item-click="handler">资产信息</tab-item>
      <tab-item @on-item-click="handler">资产变动记录</tab-item>
    </tab>
    <div class="log-content">
      <div class="base-info" v-show="active == 0">
        <div class="title">基本信息</div>
        <div class="base-info-content">
          <div class="label">
            <span>资产数字ID</span>
            <span>{{ baseInfo.assetCode }}</span>
          </div>
          <div class="label">
            <span>资产分类</span>
            <span>{{baseInfo.parentName }}-{{ baseInfo.className }}</span>
          </div>
          <div class="label">
            <span>资产名称</span>
            <span>{{ baseInfo.assetName }}</span>
          </div>
          <div class="label">
            <span>品牌型号</span>
            <span>{{ baseInfo.tags }}</span>
          </div>
          <div class="label">
            <span>资产创建人</span>
            <span>{{ baseInfo.createName }}</span>
          </div>
          <div class="label">
            <span>资产创建时间</span>
            <span>{{ baseInfo.createTime }}</span>
          </div>
          <div class="label">
            <span>资产使用人</span>
            <span>{{ baseInfo.useName }}</span>
          </div>
          <div class="label">
            <span>资产使用部门</span>
            <span>{{ baseInfo.departmentName }}</span>
          </div>
          <!-- <div class="label">
            <span>资产接收日期</span>
            <span>{{ baseInfo.indate }}</span>
          </div> -->
          <div class="label">
            <span>摆放位置</span>
            <span>{{ baseInfo.place }}</span>
          </div>
          <div class="label">
            <span>价格</span>
            <span>{{ baseInfo.price }}</span>
          </div>
          <div class="label">
            <span>有效期</span>
            <span>{{ baseInfo.indate }}</span>
          </div>
          <div class="label">
            <span>说明</span>
            <span>{{ baseInfo.assetExplain }}</span>
          </div>
          <div class="label">资产图片</div>
          <div id="instruction-pic">
            <div
              v-show="baseInfo.fileList && baseInfo.fileList.length > 0"
              v-for="(item, index) in baseInfo.fileList"
              :key="index"
              class="instruction-pic-item"
            >
              <img :src="item.fileUrl" alt="" @click="showImage(item.fileUrl)"/>
            </div>
          </div>
        </div>
        <div v-if="editBtn" class="submit-box">
          <x-button class="submit-btn" @click.native="toEdit">编辑</x-button>
          <x-button class="submit-copy" @click.native="toCopyEdit">复制创建</x-button>
        </div>
        <div v-if="inventoryBtn" class="submit-inventory">
          <x-button class="submit-btn" @click.native="toInventory">提交盘点</x-button>
        </div>
      </div>
      <div class="record" v-show="active == 1">
        <timeline>
          <timeline-item v-for="(item, index) in recordList" :key="index">
            <!-- {{ item.assetId }}-- -->
            <h4 class="title">{{ item.info }}</h4>
            <div v-if="item.recordId" class="record-msg">
              <p>
                单据编号：<span>{{ item.recordId }}</span>
              </p>
              <!-- <p>描述：{{ item.info }}</p> -->
              <!-- <p>借用部门：{{ item.departmentName }}</p> -->
              <p>时间：{{ item.createTime }}</p>
            </div>
          </timeline-item>
        </timeline>
      </div>
      <el-image-viewer 
              v-if="showViewer"
              :url-list="srcList"
              :on-close="closeViewer">
      </el-image-viewer>
    </div>
  </div>
</template>

<script>
import { XButton, Tab, TabItem, Timeline, TimelineItem } from "vux";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { mapActions } from "vuex";
import AssetApi from "@/api/asset.js";
export default {
  components: {
    XButton,
    Tab,
    TabItem,
    Timeline,
    TimelineItem,
    ElImageViewer
  },
  data() {
    return {
      active: 0,
      baseInfo: {
        // assetCode: "123",
        // className: "投影仪",
        // assetName: "投影仪",
        // createName: "张三",
        // createTime: "2023-05-24",
        // useName: "燕子",
        // receiveDept: "办公室",
        // indate: "2023-05-31",
      },
      recordList: [],
      assetId: "",
      editBtn: false,
      inventoryBtn: false,
      srcList: [],
      showViewer: false // 显示查看器
    };
  },

  mounted() {
    if (this.$route.params.id) {
      this.assetId = this.$route.params.id;
      if(this.$route.params.edit){
        if (JSON.parse(this.$route.params.edit)) {
          this.editBtn = true;
        }
      }
      if (this.$route.params.inventory == 1) {
        this.inventoryBtn = true;
      }
      this.getInfo();
      this.getRecord();
    }
    if (this.$route.params.code) {
      this.getInfoByCode(this.$route.params.code);
    }
  },
  methods: {
    ...mapActions("user", ["setSignInfo"]),
    // 查看图片
    showImage(path) {
        this.srcList[0] = path; // 需要预览的图片
        this.showViewer = true;
    },
    // 关闭查看器
    closeViewer() {
        this.showViewer = false;
    },
    getInfoByCode(code) {
      AssetApi.getAssetDetail({ assetCode: code }).then((res) => {
        this.assetId = res.data.assetId;
        this.baseInfo = res.data;
        this.getRecord();
        console.log(148, this.$store.state.user.userInfo.name);
        if (
          (res.data.createName == this.$store.state.user.userInfo.name ||
          res.data.useName == this.$store.state.user.userInfo.name) && !this.$route.params.isDetail
        ) {
          this.editBtn = true;
        }
      });
    },
    toEdit() {
      this.$router.push({
        name: "registration",
        query: {
          id: this.assetId,
        },
      });
    },
    toCopyEdit() {
      this.$router.push({
        name: "registration",
        params: {
          info: this.baseInfo,
        },
      });
    },
    handler(index) {
      this.active = index;
    },
    getInfo() {
      AssetApi.getAssetInfo({ id: this.assetId }).then((res) => {
        this.baseInfo = res.data;
      });
    },
    getRecord() {
      AssetApi.getAssetRecord({ assetId: this.assetId }).then((res) => {
        console.log(135, res.data);
        this.recordList = res.data;
      });
    },
    // 提交盘点
    toInventory() {
      let _params = {
        checkId: this.$route.params.checkId,
        ids: this.assetId,
      };
      AssetApi.assetCheckUpdate(_params).then((res) => {
        this.$vux.toast.show({
          text: "资产盘点提交成功",
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.log-content {
  border-top: 8px solid #f1f1f1;
  padding-bottom: 62px;
}
.base-info {
  position: relative;
  .title {
    border-bottom: 1px solid #f1f1f1;
    padding: 0 20px;
    position: relative;
    height: 42px;
    line-height: 42px;
    &:before {
      content: "";
      width: 3px;
      height: 16px;
      background: rgb(206, 203, 204);
      position: absolute;
      left: 13px;
      top: 13px;
    }
  }
  .base-info-content {
    padding: 0 20px;
  }
  .label {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f1f1f1;
    line-height: 48px;
    align-items: center;
    span:nth-child(2) {
      text-align: right;
      flex: 1;
      margin-left: 10px;
      line-height: 28px;
      /* 单行显示省略号 */
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
    }
  }
}
.record {
  .title {
    color: rgb(87, 184, 136);
    font-size: 15px;
    line-height: 30px;
  }
  .record-msg {
    p {
      color: #666;
      font-size: 13px;
      line-height: 28px;
    }
  }
}
.submit-inventory {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  background: #fff;
  z-index: 10000;
  .submit-btn {
    width: 260px;
    border-radius: 20px;
    color: #fff;
    margin: 0 auto;
    border-color: rgb(205, 166, 105);
    background: rgb(205, 166, 105);
  }
}
.submit-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  background: #fff;
  z-index: 100;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .submit-btn {
    width: 120px;
    border-radius: 20px;
    color: #fff;
    margin: 0;
    border-color: rgb(205, 166, 105);
    background: rgb(205, 166, 105);
  }
  .submit-copy {
    width: 120px;
    border-radius: 20px;
    color: rgb(205, 166, 105);
    border: 1px solid rgb(205, 166, 105);
    background: #fff;
    margin: 0;
  }
}
/deep/#instruction-pic {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  img {
    margin-right: 8px;
    width: 125px;
    height: auto;
    border-radius: 4px;
  }
  .instruction-pic-item {
    position: relative;
    margin-right: 10px;
  }
  .fa-close {
    position: absolute;
    top: -5px;
    right: -5px;
    color: #999;
    font-size: 14px;
    font-weight: 300;
  }
}
</style>
